<!-- 企业信息审核 -->
<template>
  <div class="home-page-content dictionary-manage">
    <h3>字典表管理</h3>
    <Row>
      <Col span="5" class="dictionary-name-box">
        <ul class="dictionary-name-ul">
          <li
            :class="{'bg-blue':parentId === it.dictId}"
            v-for="it in dictionaryList"
            :key="it.key"
            @click="getDictionary(it.dictId)"
          >
            <p>{{ it.name }}</p>
            <p class="small">{{ it.dictId }}</p>
          </li>
        </ul>
      </Col>
      <Col span="19" class="table-box">
        <div class="com-action-table-btn">
          <Button type="primary" @click="onAdd">
            <Icon type="md-add" />
            <span>新增选项</span>
          </Button>
        </div>
        <Table
          row-key="dictId"
          height="650"
          update-show-children
          :load-data="handleLoadData"
          :columns="columns"
          :data="listData"
        >
          <template slot-scope="{ row }" slot="action">
            <BtnText type="primary" @BtnClick="onEdit(row)">编辑</BtnText>
            <BtnText type="primary" @BtnClick="onAddChildNode(row)">新增子集选项</BtnText>
          </template>
        </Table>
      </Col>
    </Row>

    <Modal v-model="modalFlag" width="480px" title="字典选项设置" :mask-closable="false" @on-visible-change="onVisible">
      <Form ref="modalFormData" :model="modalFormData" :rules="rules">
        <FormItem label="选项名称" prop="name">
          <Input v-model="modalFormData.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="Key" prop="dictId">
          <Input v-model="modalFormData.dictId" placeholder="请输入Key"></Input>
        </FormItem>
        <FormItem label="排序号" prop="rankNum">
          <Input number v-model="modalFormData.rankNum" placeholder="请输入排序号"></Input>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input type="textarea" :rows="4" v-model="modalFormData.remark" placeholder="请输入选项备注"></Input>
        </FormItem>
        <FormItem label="自定义参数" prop="param">
          <Input type="textarea" :rows="4" v-model="modalFormData.param" placeholder="请输入选项自定义参数"></Input>
        </FormItem>
      </Form>
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalFlag = false">取消</BtnPlain>
        <Button type="primary" @click="onConfirm">提交</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { getDictByParentId, getDictTreeByParentId, updateDict, addDict } from '@/api/system.js'
export default {
  name: "dictionaryManage",
  components: {},
  data () {
    return {
      dictionaryList: [],
      parentId: '', // 最顶层级id
      columns: [
        {
          title: '选项名称',
          key: 'name',
          tree: true
        },
        {
          title: 'key',
          key: 'dictId',
        },
        {
          title: '备注',
          key: 'remark',
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center',
        },
      ],
      listData: [],
      modalFlag: false,
      modalFormData: { name: '', dictId: '', rankNum: '', remark: '', param: '', parentId: '' },
      rules: {
        name: { required: true, message: '选项名称必填' },
        dictId: { required: true, message: '字典key必填' },
        rankNum: [
          { required: true, message: '排序号必填' },
          { pattern:/^[1-9]\d*$/, message: '请输入正整数' }
        ]
      },
      modalType: 'add'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.dictionaryList = await getDictByParentId({})
      const parentId = this.dictionaryList[0].dictId || null
      this.getDictionary(parentId)
    },
    async getDictionary (parentId,types) {
      if (this.parentId === parentId && !types) return
      this.parentId = parentId
      const res = await getDictTreeByParentId({ parentId })
      this.listData = res.map(it => {
        if (it.allChildrenCount) {
          it.children = []
          it._loading = false
        }
        return it
      })
    },
    // 加载子集数据
    async handleLoadData (item, callback) {
      const res = await getDictTreeByParentId({ parentId: item.dictId })
      const childData = res.map(it => {
        if (it.allChildrenCount) {
          it.children = []
          it._loading = false
        }
        return it
      })
      callback(childData)
    },
    pageSizeChange (row) {
      this.init()
    },
    // 新增选项
    onAdd () {
      this.modalFormData.parentId = this.parentId
      this.modalFlag = true
    },
    // 编辑
    onEdit (row) {
      this.modalType = 'edit'
      this.modalFlag = true
      const { name, dictId, rankNum, remark, param, parentId } = row
      this.modalFormData = { name, dictId, rankNum, remark, param, parentId }
    },
    // 新增子集选项
    onAddChildNode (row) {
      this.modalFlag = true
      this.modalFormData.parentId = row.dictId
    },
    // 新增确定按钮
    onConfirm () {
      this.$refs['modalFormData'].validate(async (valid) => {
        if (!valid) return
        const request = { ...this.modalFormData }
        if (this.modalType === 'add') {
          await addDict(request)
        } else {
          await updateDict(request)
        }
        this.getDictionary(this.parentId,true)
        this.modalFlag = false
      })
    },
    // 重置表单状态
    onVisible (val) {
      if (!val) {
        this.modalType = 'add'
        this.modalFormData.parentId = ''
        this.$refs['modalFormData'].resetFields();
      }
    },
  }
};
</script>

<style lang="less" scoped>
.table-box {
  padding: 20px 0 0 20px;
}

.search-input {
  width: 200px;
  margin-right: 20px;
}

.dictionary-name-box {
  height: 723px;
  padding: 20px 20px 0 0;
  overflow: scroll;
  border-right: 1px solid #eee;
  li {
    padding: 2px 10px;
    margin-bottom: 10px;
    line-height: 24px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #f1f8ff;

    &:hover {
      background-color: #c7e0f9;
    }
  }
  .bg-blue {
    background-color: #c7e0f9;
  }
  .small {
    white-space: nowrap;
    font-size: 12px;
    color: #9aa4af;
  }
}
</style>

<style lang="less">
.dictionary-manage {
  .ivu-table-cell {
    display: flex;
    align-items: center;
  }
  .ivu-table-cell-tree {
    margin-right: 4px;
  }
}
</style>
